<template>
  <div>
    <el-card v-show="show" class="box-card" style="margin: 10px 0">
      <el-row :gutter="0">
        <el-col :span="12"><div class="grid-content bg-purple">{{ name }}</div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple" style="text-align: right">
          <span style="display: block;line-height: 1.8;color: red">开始时间：{{ toTime(startTime) }}</span>
          <span style="display: block;line-height: 1.8;color: red">结束时间：{{ toTime(endTime) }}</span>
        </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-show="show" class="box-card" style="margin: 10px 0 10px 10px">
      <h3>
        <span>{{ index+1+'、' }}</span>{{ answer? answer.title :'' }}
        <img v-show="mytitle" :src="mytitle?version + '/uploadFile/path/' + mytitle:''" alt="titlePicUrl" class="random-pic">
      </h3>
      <div>
        <el-radio-group
          v-show="optionType===1"
          v-model="result[index]"
          @change="changeSingle(singleSelection[0].index)">
          <div v-for="(selecttion, index) in singleSelection" :key="index" class="radio" >
            <el-radio v-show="selecttion.option!==''" :label="selecttion.Letter" disabled>
              <span :style="{'color':isCorrect(selecttion.Letter,selecttion.result,selecttion.rightAnswer)}">{{ selecttion.Letter + '、' }}</span>
              <span v-show="!isImage(selecttion.option)" :style="{'color':isCorrect(selecttion.Letter,selecttion.result,selecttion.rightAnswer)}">{{ selecttion.option }}</span>
              <img v-show="isImage(selecttion.option)" :src="version + '/uploadFile/path/' + selecttion.option" alt="optiona" class="random-pic">
            </el-radio>
          </div>
        </el-radio-group>
        <!--选择多选按钮-->
        <el-checkbox-group
          v-show="optionType===2"
          :min="1"
          v-model="result[index]"
          @change="changeMulti(multiSelection[0].index)">
          <div v-for="(selecttion, index) in multiSelection" :key="index" class="radio" >
            <el-checkbox :label="selecttion.Letter" disabled>
              <span :style="{'color':isCorrect(selecttion.Letter,selecttion.result,selecttion.rightAnswer)}">{{ selecttion.Letter + '、' }}</span>
              <span v-show="!isImage(selecttion.option)" :style="{'color':isCorrect(selecttion.Letter,selecttion.result,selecttion.rightAnswer)}">{{ selecttion.option }}</span>
              <img v-show="isImage(selecttion.option)" :src="version + '/uploadFile/path/' + selecttion.option" alt="optiona" class="random-pic">
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="padding-left: 30px">
          <p>正确答案：{{ correct }}</p>
          <p>解析：{{ analys }}</p>
        </div>
        <el-row :gutter="0">
          <el-col :span="12">
            <div class="grid-content bg-purple"><el-button plain @click="switchAnser(-1)">上一题</el-button></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple" style="text-align: right">
              <el-button plain @click="switchAnser(1)">下一题</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col v-for="(item, index) in director" :key="index" :span="1">
            <div class="grid-content bg-purple" >
              <el-button :type="directorColor(item.isDoQuest)" @click="changeAnswer(item.num)">{{ item.num + 1 }}</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="padding-top: 10px">
        <span style="display: inline-block;padding: 7px;background-color: #1188f8;margin-right: 5px"/>正确
        <span style="display: inline-block;padding: 6px;border: 1px solid #3b3b3b;margin-left: 30px;background-color:#f56c6c"/>错误
        <span style="display: inline-block;padding: 6px;border: 1px solid #3b3b3b;margin-left: 30px"/>未答
      </div>
    </el-card>
    <div v-show="!show" style="text-align: center;margin-top: 50px">暂无题目</div>
  </div>
</template>

<script>
import axios from 'axios'
import Unix from '@/utils/unix'
import { VERSION } from '@/constants/uri'
const imageSuffixs = ['png', 'jpg', 'jpeg']
export default {
  components: {},
  data() {
    return {
      result: [],
      version: VERSION,
      show: false,
      mytitle: '',
      multiSelection: [],
      singleSelection: [],
      Surplus: '',
      totalTime: 0,
      totalAnswer: 0,
      surplusAnswer: 0,
      doPercentage: 0,
      startTime: 0,
      answerType: [],
      percentage: 0,
      mymin: 0,
      mysec: 0,
      optionType: 0,
      answer: null,
      testId: null,
      handPaperId: null,
      page: 1,
      interval: null,
      items: null,
      index: 0,
      director: null,
      size: 2000,
      myData: [],
      endTime: '',
      correct: '',
      analys: '',
      name: ''
    }
  },
  mounted() {
    if (this.$route.params.testId) {
      this.testId = this.$route.params.testId
      this.handPaperId = this.$route.params.handPaperId
      this.getTestResultInfo()
    }
    this.getTestResultInfo()
  },
  methods: {
    /**
     * 获取正确答案跟解析
     */
    getAnalysis() {
      this.correct = this.items.data[this.index].rightAnswer
      this.analys = this.items.data[this.index].answerParse
    },
    /**
     * 设置题目下面指示器，是否已经答过 isDoQuest答题状态 0未答 1答对  2答错
    */
    setDirector() {
      const arry = []
      let index = 0
      this.items.data.forEach((item) => {
        arry.push({ num: index++, isDoQuest: item.answerResult })
      })
      this.director = arry
    },
    /**
     * 设置指示器颜色
     */
    directorColor(num) {
      if (num === 0) {
        return ''
      }
      if (num === 1) {
        return 'primary'
      }
      if (num === 2) {
        return 'danger'
      }
    },
    /**
     * 点击指示器切换题目
     */
    changeAnswer(index) {
      this.index = index
      this.getAnswer()
      this.getAnalysis()
    },
    /**
     * 获取题目内容
     */
    getAnswer() {
      this.answer = this.items.data[this.index]
      this.mytitle = this.items.data[this.index].titlePicUrl
      this.optionType = this.answer.optionType
      if (this.optionType === 1) {
        this.singleSelection = [
          { Letter: 'A', option: this.answer.optiona, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result },
          { Letter: 'B', option: this.answer.optionb, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result },
          { Letter: 'C', option: this.answer.optionc, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result },
          { Letter: 'D', option: this.answer.optiond, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result },
          { Letter: 'E', option: this.answer.optione, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result }
        ]
      }
      if (this.optionType === 2) {
        this.multiSelection = [
          { Letter: 'A', option: this.answer.optiona, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result },
          { Letter: 'B', option: this.answer.optionb, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result },
          { Letter: 'C', option: this.answer.optionc, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result },
          { Letter: 'D', option: this.answer.optiond, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result },
          { Letter: 'E', option: this.answer.optione, index: this.index, rightAnswer: this.answer.rightAnswer.split(','), result: this.answer.result }
        ]
      }
    },
    /**
     * 获取题目选中状态
     */
    getResult() {
      const arry = []
      this.items.data.forEach((items) => {
        if (items.optionType === 2 && items.result) {
          items.result = items.result.split(',')
        }
        if (items.optionType === 2 && !items.result) {
          items.result = []
        }
        arry.push(items.result)
      })
      this.result = arry
    },
    /**
     * 选择单选按钮
     */
    changeSingle(index) {
      this.index = index
      this.items.data[this.index].result = this.result[this.index]
      if (this.result[this.index] === this.items.data[this.index].rightAnswer) {
        this.director[index].isDoQuest = 1
      } else {
        this.director[index].isDoQuest = 2
      }
      this.getDoAnswer()
    },
    /**
     * 选择多选按钮
     */
    changeMulti(index) {
      this.index = index
      this.items.data[this.index].result = this.result[this.index].join(',')
      if (this.result[this.index].join(',') === this.items.data[this.index].rightAnswer) {
        this.director[index].isDoQuest = 1
      } else {
        this.director[index].isDoQuest = 2
      }
      this.getDoAnswer()
    },
    /**
     * 获取题型类型
     */
    getAnswerType() {
      const arry = []
      this.items.data.forEach((item) => {
        arry.push(item.questType)
      })
    },
    /**
     * 获取已经答题的数量
     */
    getDoAnswer() {
      let count = 0
      this.director.forEach((item) => {
        if (item.isDoQuest !== 0) {
          count = count + 1
        }
      })
      this.surplusAnswer = this.totalAnswer - count
      this.doPercentage = [(count) / this.totalAnswer] * 100
    },
    /**
     * 切换题目，上一题 下一题
     */
    switchAnser(type) {
      if (type === -1 && this.index > 0) {
        this.index = this.index + type
      }
      if (type === 1 && this.index < this.items.data.length - 1) {
        this.index = this.index + type
      }
      this.getAnswer()
      this.getAnalysis()
    },
    /**
     * 是否答题正确
     */
    isCorrect(Letter, result, rightAnswer) {
      if (!result) {
        return '#464646'
      }
      if (result.indexOf(Letter) === -1) {
        return '#464646'
      }
      if (rightAnswer.indexOf(Letter) !== -1) {
        return 'blue'
      }
      if (rightAnswer.indexOf(Letter) === -1) {
        return 'red'
      }
    },
    /*
    *   答案是否是图片
    * */
    isImage(value) {
      if (!value) {
        return false
      }
      const index = value.lastIndexOf('.')
      if (!index) {
        return false
      }

      if (imageSuffixs.includes(value.substr(index + 1))) {
        return true
      }
    },
    /**
     * 转换日期
     */
    toTime(mydata) {
      return Unix.unixToTime(mydata)
    },
    getTestResultInfo() {
      axios.get(`/handTestResultInfo/${this.testId}/${this.handPaperId}/${this.page}/${this.size}`).then(res => {
        if (res.success) {
          if (res.data.length > 0) {
            this.show = true
            this.total = res.total
            const temp = JSON.parse(JSON.stringify(res))
            this.items = temp
            this.endTime = res.endTime
            this.startTime = res.startTime
            this.totalTime = res.time
            this.totalAnswer = res.data.length
            this.name = res.name
            this.setDirector()
            this.getAnswer()
            this.getResult()
            this.getDoAnswer()
            this.getAnalysis()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .progress {
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
    .time{
      margin-bottom: 20px;
    }
  }
  .radio{
    margin: 20px 0 20px 15px;
    font-size: 16px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 0px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #fff;
  }
  .grid-content {
    border-radius: 0px;
    min-height: 36px;
    line-height: 2.5;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-progress {
    position: relative;
    line-height: 1;
    width: 85%;
    display: inline-block;
  }
  .el-button+.el-button {
    margin-left: 2px;
  }
  .el-col-1 {
    width: 3.7%;
    margin-top: 2px;
  }
  .random-pic {
    width: 150px;
    margin-left: 20px;
    vertical-align: middle;
  }
</style>
